<template>
	<view class="container">
		<!-- 导航栏 -->
		<ym-navbar :background="{ background: '#fff' }" :immersive="false" :borderBottom="false" :showTitle="false">
			<view slot="left" data-url="accountInfo/accountInfo">
				<view class="u-f-ac nav-left">
					<image src="/static/images/icon-ball.png" mode="aspectFill"></image>
					<text>{{ userinfo.sharerName }}</text>
				</view>
			</view>
		</ym-navbar>
		<view class="header u-f-jse">
			<view class="item" data-url="fillRecords/fillRecords" @tap="$jumpPage">
				<image src="/static/images/icon-jilu.png" mode="aspectFill"></image>
				<view>收益明细</view>
			</view>
			<view class="item" data-url="../withdraw/withdraw" @tap="$jumpPage">
				<view class="money">{{ statisticsData.earnMoney ? statisticsData.earnMoney : 0 }}</view>
				<view class="btn-withdraw">提现</view>
			</view>
			<view class="item" data-url="/pages/accountManage/accountManage" @tap="$jumpPage">
				<image src="/static/images/icon-shezhi.png" mode="aspectFill"></image>
				<view>经营管理</view>
			</view>
		</view>
		<view class="header-bg"></view>
		<view class="statistics">
			<view class="title u-f-jsb">
				<view>
					<view class="time">
						设备数量(台)
						<text style="margin-left: 10rpx;">{{ statisticsData.macNum ? statisticsData.macNum : 0 }}</text>
					</view>
				</view>
				<view class="title-r u-f-ajc" data-url="./msgNotice/msgNotice" @tap="$jumpPage">
					<image src="/static/images/icon-xiaoxi.png" mode="aspectFill"></image>
					<view>消息通知</view>
				</view>
			</view>
			<view class="content">
				<view class="content-item">
					<view>{{ statisticsData.todayEarnMoney ? statisticsData.todayEarnMoney : 0 | toFixed2 }}</view>
					<view class="label">今日收益(元)</view>
				</view>
				<view class="content-item">
					<view>{{ statisticsData.todayNum ? statisticsData.todayNum : 0 | kg2ton }}</view>
					<view class="label">今日销量(吨)</view>
				</view>
				<view class="content-item">
					<view>{{ statisticsData.monthNum ? statisticsData.monthNum : 0 | kg2ton }}</view>
					<view class="label">本月销量(吨)</view>
				</view>
			</view>
		</view>

		<view class="sales">
			<view class="title u-f-jsb" :style="{ top: topPos }">
				<view class="title-l">
					<view class="shouyi">
						<text>收益额</text>
						<text style="color: rgba(255, 132, 0, 1);font-size: 48rpx;margin-left: 20rpx;">
							<text style="font-size: 30rpx;">￥</text>
							{{ MachineListInfo.earnMoney ? MachineListInfo.earnMoney : 0 }}
						</text>
					</view>
					<view class="date-bar" :animation="animationData" :key="date1">
						{{ date1 }}
						<text v-if="date2 != ''" style="margin-left: 10rpx;">至 {{ date2 }}</text>
					</view>
				</view>
				<view class="title-r u-f-ac">
					<image src="../../static/images/icon-rili.png" mode="aspectFill" @tap="openDate"></image>
					<image v-if="!isOrderDes" src="/static/images/icon-paixu1.png" mode="aspectFill" @tap="isOrderDes = !isOrderDes"></image>
					<image v-else src="/static/images/icon-paixu2.png" mode="aspectFill" @tap="isOrderDes = !isOrderDes"></image>
				</view>
				<!-- <view class="date u-f-ac"  @tap="change">
					<view class="date-item" ><text :class="{'active':isDay}">日</text></view>
					<view class="date-item"><text :class="{'active':!isDay}">月</text></view>
					<view class="bg-block" :class="{'active':isDay}" ></view>
				</view> -->
			</view>
			<view class="list">
				<block v-for="(item, index) in MachineListInfo.lstFillMachine" :key="index">
					<view class="item" :data-url="`fillRecords/fillRecords?id=${item.macId}`" @tap="gotoFillrecords">
						<view class="name">{{ item.macName }}</view>
						<view class="data">
							<view class="u-f-jsb ">
								<text>销售总量(吨)</text>
								<text>{{ item.saleWeightSum | kg2ton }}</text>
							</view>
							<view class="u-f-jsb">
								<text>收益金额(元)</text>
								<text>{{ item.saleMoneySum | toFixed2 }}</text>
							</view>
							<view class="u-f-jsb">
								<text>当前余量(吨)</text>
								<text :style="{color: item.curCapacity < 0.5 ?'red':''}">{{ item.curCapacity }}</text>
							</view>
						</view>
					</view>
				</block>
				<view class="no-data" v-if="!MachineListInfo.lstFillMachine.length">
					<image src="/static/images/noData1.png" mode="aspectFill"></image>
					暂无加注记录
				</view>
			</view>
			<ym-date-selector ref="dateSelector" :show.sync="show" :isfixedTop="false" @selected="selectedDate"></ym-date-selector>
			
		</view>
	</view>
</template>

<script>
import ymNavBar from '@/components/ym-navbar/ym-navbar.vue';
import ymDateSelector from '@/components/ym-date-selector/ym-date-selector.vue';
export default {
	components: { ymNavBar, ymDateSelector },
	data() {
		return {
			title: 'Hello',
			isDay: false,
			statisticsData: '',
			show: false,
			isOrderDes: false, // 排序
			accountInfo: uni.getStorageSync('accountInfo'),
			date1: '', // 选择的日期始
			date2: '', // 选择日期终
			MachineListInfo: '', //加注机列表信息
			oldDate1: '',
			animationData: {},
			dateType: 1,
			statusBarHeight: '',
			topPos: '', // 收益栏吸顶位置
			macMap:{}
		};
	},
	computed: {
		startAni() {
			return this.oldDate1 == this.date1;
		},
		userinfo() {
			return this.$store.state.userinfo;
		}
	},
	watch: {
		async date1(newVal, oldVal) {
			this.oldDate1 = oldVal;
			setTimeout(() => {
				this.oldDate1 = newVal;
			}, 1000);
		},
		isOrderDes(newVal) {
			this.MachineListInfo.lstFillMachine.sort((a, b) => {
				if (newVal) {
					return a.saleWeightSum - b.saleWeightSum;
				} else {
					return b.saleWeightSum - a.saleWeightSum;
				}
			});
		}
	},
	onLoad() {
		const info = uni.getSystemInfoSync();
		let height = info.platform == 'ios' ? 44 : 48;
		this.statusBarHeight = info.statusBarHeight;
		this.devicePixelRatio = info.devicePixelRatio;
		this.topPos = this.statusBarHeight + height + uni.upx2px(180) + 'px';
		// 初始化一个动画
		this.animation = uni.createAnimation({
			duration: 1000,
			timingFunction: 'ease'
		});
		let now = new Date();
		let year = now.getFullYear();
		let month = (now.getMonth() + 1).toString().padStart(2, 0);
		let day = now
			.getDate()
			.toString()
			.padStart(2, 0);
		let totalDays = new Date(year, month, 0).getDate();
		this.date1 = `${year}-${month}-01`;
		this.date2 = `${year}-${month}-${day}`;
		this.$store.dispatch('requestBindedWxInfo');
	},
	onShow() {
		this.getIndexStatistics();
		this.getMachineList();
	},
	onPullDownRefresh() {
		this.getMachineList();
		this.getIndexStatistics(() => {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 888);
		});
	},
	methods: {
		// 定义动画内容
		rotateAndScale() {
			console.log('开始动画');
			// 定义动画内容
			this.animation
				.translateX(20)
				.opacity(0.5)
				.step({ duration: 500 });
			// 导出动画数据传递给data层
			this.animationData = this.animation.export();
			setTimeout(() => {
				this.animation
					.translateX(0)
					.opacity(1)
					.step({ duration: 200 });
				// 导出动画数据传递给data层
				this.animationData = this.animation.export();
			}, 500);
		},
		// 获取数据统计
		getIndexStatistics(cb) {
			this.$u.api._getIndexStatistics().then(res => {
				this.statisticsData = res;
				cb && cb();
			});
		},
		// 获取加注机列表
		async getMachineList(cb) {
			let arr = this.date1.split('-');
			let totalDays = new Date(arr[0], arr[1], 0).getDate();
			let startTime = '';
			let endTime = '';
			totalDays.toString().padStart(2, 0);
			startTime = this.date1;
			endTime = this.date2;
			
			await this.getPromotionMaclist();
			this.$u.api._getMachineList({ startTime, endTime, dateType: 1 }).then(res => {
				// 整合加注机销售量为0时lstFillMachine中漏掉的机器
				for (var i = 0; i < res.lstFillMachine.length; i++) {
					let item = res.lstFillMachine[i];
					// 如果lstFillMachine中有和macMap对应的id，则去除macMap的内容,防止重复
					if(this.macMap.hasOwnProperty(item.macId)) {
						item.curCapacity = this.macMap[item.macId].curCapacity;
						delete this.macMap[item.macId];
					}
				}
				let list = Object.values(this.macMap);
				res.lstFillMachine = [...res.lstFillMachine,...list];
				// 排序
				if (this.isOrderDes) {
					res.lstFillMachine = res.lstFillMachine.sort((a, b) => {
						return a.saleWeightSum - b.saleWeightSum;
					});
				} else {
					res.lstFillMachine = res.lstFillMachine.sort((a, b) => {
						return b.saleWeightSum - a.saleWeightSum;
					});
				}
				this.MachineListInfo = res;
				this.$store.commit('setMachinelist', res);
			});
		},
		// 日期选择
		selectedDate(e) {
			console.log(e);
			this.date1 = e.date1;
			this.date2 = e.date2;
			this.dateType = e.isDayMode ? 1 : 2;
			this.getMachineList();
			this.rotateAndScale();
		},
		// 获取此分润方下的所有设备列表
		async getPromotionMaclist() {
			return this.$u.api._getPromotionMaclist().then(res => {
				this.macMap = {};
				res.forEach(item => {
					// 计算剩余容量
					this.macMap[item.id] = {
						macId: item.id,
						macName: item.macName,
						saleMoneySum: 0,
						saleWeightSum: 0,
						curCapacity:(item.currentCapacity/1000).toFixed(3) // 单位是吨
					};
				});
			});
		},
		gotoFillrecords(e) {
			let url = e.currentTarget.dataset.url;
			url = url + `&sTime=${this.date1}&eTime=${this.date2}`;
			uni.navigateTo({
				url
			});
		},
		change() {
			this.isDay = !this.isDay;
		},
		openDate() {
			this.$refs.dateSelector.toggle();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.bottom-menu {
	width: 100vw;
	position: fixed;
	bottom: 0;
}
.nav-left {
	font-weight: 600;
	font-size: 36rpx;
	image {
		width: 35rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
}

.header {
	position: fixed;
	// top: 155rpx;
	margin-top: -2rpx;
	width: 100vw;
	padding: 50rpx 0;
	border-radius: 0 0 50rpx 50rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.1);
	z-index: 999;

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #243044;
		height: 100rpx;
		justify-content: space-between;
		position: relative;

		.money {
			font-weight: bold;
			font-size: 48rpx;
		}
		
		.btn-withdraw {
			border: 1rpx solid rgba(255, 206, 0, 1);
			border-radius: 20rpx;
			padding: 4rpx 16rpx;
			box-shadow: 0 0 1rpx 4rpx #eee;
		}

		image {
			width: 44rpx;
			height: 50rpx;
			margin-bottom: 20rpx;
		}

		&:nth-child(3) image {
			width: 50rpx;
			height: 58rpx;
		}
	}
}

.header-bg {
	background-image: linear-gradient(to bottom, #ffce00, #ffce00, #ffce00, #f5f5f5);
	height: 500rpx;
	z-index: -1;
}

.statistics {
	margin: 0 25rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 36rpx;
	margin-top: -280rpx;
	.title {
		font-size: 32rpx;
		color: #343434;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #eee;
		.time {
			color: rgba(102, 102, 102, 1);
			font-size: 28rpx;
			font-weight: 600;
		}

		.title-r {
			font-size: 22rpx;
			border: 1rpx solid rgba(255, 206, 0, 1);
			border-radius: 30rpx;
			width: 160rpx;
			height: 60rpx;
			font-weight: 600;

			image {
				width: 24rpx;
				height: 22rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
			}
		}
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		.content-item {
			font-size: 36rpx;
			font-weight: 600;
			width: 33.33%;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.label {
				font-weight: 400;
				margin-top: 10rpx;
				font-size: 22rpx;
				color: rgba(37, 48, 69, 0.6);
			}
		}
	}
}

.sales {
	margin: 25rpx 15rpx;
	background-color: #ffffff;
	padding: 0 25rpx 25rpx 25rpx;
	border-radius: 20rpx 20rpx 0 0;
	.title {
		font-size: 32rpx;
		color: #343434;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 20rpx;
		position: sticky;
		z-index: 1;
		background-color: #ffffff;
		top: 350rpx;

		.title-l {
			.shouyi {
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				margin: 20rpx 0;
			}
			& > view:nth-child(2) {
				font-size: 24rpx;
				color: rgba(102, 102, 102, 1);
			}
			.date-bar {
				font-size: 32rpx;
			}
		}
		.title-r {
			image {
				width: 52rpx;
				height: 60rpx;
				padding: 10rpx;

				&:nth-child(2) {
					width: 57rpx;
					height: 60rpx;
					margin: 30rpx;
				}
			}
		}
	}

	.date {
		position: relative;
		width: 168rpx;
		border-radius: 30rpx;
		height: 58rpx;
		overflow: hidden;
		animation: all ease 1s;
		background-color: rgba(255, 206, 0, 1);
		> view {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
		.date-item {
			position: relative;
			width: 84rpx;
			height: 58rpx;
			> text {
				position: absolute;
				width: 84rpx;
				height: 58rpx;
				text-align: center;
				line-height: 58rpx;
				z-index: 99;
				color: rgba(255, 206, 0, 1);
				font-weight: 800;
				&.active {
					color: #ffffff;
				}
			}
		}
		.bg-block {
			position: absolute;
			left: 6rpx;
			width: 74rpx;
			height: 50rpx;
			background-color: #ffffff;
			border-radius: 25rpx;
			transition: all linear 0.3s;

			&.active {
				left: 90rpx;
			}
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		min-height: 600rpx;
		align-content: flex-start;
		.item {
			border-radius: 20rpx;
			width: 324rpx;
			min-height: 190rpx;
			padding: 0rpx 6rpx;
			margin-bottom: 20rpx;
			position: relative;
			background: #f5f5f5;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.name {
				width: 240rpx;
				font-size: 28rpx;
				color: #242f44;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
				font-weight: 600;
				overflow: hidden;
				white-space: nowrap;
				text-align: center;
			}

			.data {
				width: 100%;
				min-height: 109rpx;
				font-size: 24rpx;
				margin-bottom: 6rpx;
				color: rgba(36, 47, 68, 0.6);
				background-color: #ffffff;
				padding: 20rpx 27rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				line-height: 1.6;

				text:last-child {
					color: rgba(36, 47, 68, 1);
				}
			}
			
			
		}
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		scale: 1.2;
		transform: translateX(30rpx);
	}
	100% {
		scale: 1;
		transform: translateX(0rpx);
	}
}
</style>
